<template>
  <div id="home">
    <div class="login-panel" v-if="login_panel_isvisible">
      <img src="../assets/3626141(1).png" class="illustration">
      <div class="login-part">
        <p class="login-header">登录&ensp;Ai_Home</p>
        <input placeholder="手机号/账号" class="login-account-input"></input>
        <br>
        <input placeholder="密码" class="login-account-input login-password-input"></input>
        <br>
        <button class="login-button">登录</button>
        <div class="panel-bottom-login"><span style="color: #f7f4ed;font-size: 14px">还没有账户？</span><span style="color: crimson" @click="register()">注册</span></div>
      </div>
    </div>
    <div class="register-panel" v-if="register_panel_isvisible">
      <img src="../assets/6463428-removebg-preview.png" class="illustration2">
      <p class="login-header">注册&ensp;Ai_Home</p>
      <p class="input-phone">输入你的手机号来创建帐户。</p>
      <input placeholder="手机号/账号" class="login-account-input"></input>
      <br>
      <input placeholder="密码" class="login-account-input login-password-input"></input>
      <br>
      <div class="verification-container">
        <input type="text" placeholder="验证码" class="verification-code-input verification-code">
        <button class="send-code-btn">发送验证码</button>
      </div>
      <br>
      <button class="register-button">注册</button>
      <div class="panel-bottom-register"><span style="color: #f7f4ed;font-size: 14px">已有账户？</span><span style="color: crimson;cursor:pointer;" @click="skipregister()">在此登录</span></div>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";

const register =()=>{
  register_panel_isvisible.value =!register_panel_isvisible.value
  login_panel_isvisible.value =! login_panel_isvisible.value
}
const skipregister = ()=>{
  register_panel_isvisible.value =!register_panel_isvisible.value
  login_panel_isvisible.value =! login_panel_isvisible.value
}
const register_panel_isvisible = ref(false)
const login_panel_isvisible = ref(true)
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
#home{
  width: 100%;
  min-height: 100vh;
  background: url("../assets/sign-bg.jpg") center center no-repeat;
  background-size: 100% 100%;
}
.register-panel,
.login-part{
  position:fixed ;
  top: 20%;
  left: 25%;
  background-color: #201e2a;
  width: 45%;
  height: 50%;
  border-radius: 20px;
}
.login-header{
  position: relative;
  text-align: center;
  top: 10%;
  color: white;
  font-size: 30px;
  font-weight: bold;
}
.illustration{
  z-index: 20;
  position: absolute;
  top: 37%;
  left: 30%;
  width:200px;
  height:200px;
}
.illustration2{
  z-index: 20;
  position: absolute;
  top: 37%;
  left: 10%;
  width:200px;
  height:200px;
}
.login-account-input{
  position: relative;
  top: 25%;
  left: 45%;
  padding: 17px;
  width: 40%;
  border-radius: 10px;
}
.verification-code-input{
  position: relative;
  top: 25%;
  left: 0;
  padding: 17px;
  width: 40%;
  border-radius: 10px;
}
.verification-container {
  position: relative;
  margin-top: 4%;
  top: 22%;
  left: 45%;
  display: flex;
  align-items: center;
  width: 45%;  /* 调整总宽度 */
}

.verification-code {
  padding: 17px;
  border: 1px solid #ccc;
  border-radius: 10px 0 0 10px ;
  outline: none;
  width: 65%;  /* 调整验证码输入框宽度比例 */
}

.send-code-btn {
  padding: 17px;
  border: 1px solid #363444;
  background-color: #363444;
  color: white;
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  width: 35%;  /* 调整按钮宽度比例 */
  margin-top: 4%;  /* 移除所有边距 */
}

.send-code-btn:hover {
  background-color: #555;
}

.login-password-input{
  margin-top: 4%;
}
.verification-code{
  margin-top: 4%;
}
.login-button {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  width: 45%;
  left: 45%;
  top: 32%;
  background-color: #363444;
  border: none; /* 移除边框颜色 */
  color: #95949d; /* 设置“登录”文字颜色 */
  letter-spacing: 2px; /* 增加“登录”两个字之间的间距 */
  text-align: center;
}
.panel-bottom-login{
  cursor: pointer;
  position: relative;
  top: 34%;
  left: 72%;
}
.panel-bottom-register{
  position: relative;
  top: 24%;
  left: 72%;
}
.input-phone{
  position: absolute;
  top: 20%;
  left: 38%;
  color: #f7f4ed;
  font-size: 14px;
}
.register-button{
  position: relative;
  padding: 15px;
  border-radius: 10px;
  width: 45%;
  left: 45%;
  top: 22%;
  background-color: #363444;
  border: none; /* 移除边框颜色 */
  color: #95949d; /* 设置“登录”文字颜色 */
  letter-spacing: 2px; /* 增加“登录”两个字之间的间距 */
  text-align: center;
}
</style>